<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>

<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>角色名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="角色名称" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item" style="display: flex;">
                <label class="layui-form-label">
                    <span class="x-red">*</span>角色菜单
                </label>
                <div id="menu" style="width: 100%;flex: 1;"></div>
                <input type="hidden" id="menu_ids" name="menu_ids">
            </div>

            <!-- <input type="hidden" name="pid" id="pid" value="" /> -->
            <input type="hidden" name="id" id="id" value="" />
            <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;" />

        </form>
    </div>
    <script>
        let params = {
            addUrl: '/admin/rule/add',
            editUrl: '/admin/rule/edit',
            detailUrl: '/admin/rule/detail',
        }
        form_ajax(params)
        let id = GetQueryString('id')
        if (id) {
            new Promise((resolve) => {
                Ajax(params.detailUrl, { id }).then(res => {
                    resolve(res.data.menu_ids)
                })
            }).then((value) => {
                menuList(value)
            })
        } else {
            menuList([])
        }
        function menuList(value) {
            Ajax('/admin/menu/list', { id }).then(result => {
                let option = {
                    el: '#menu',
                    autoRow: true,
                    filterable: true,
                    tree: {
                        show: true,
                        showFolderIcon: true,
                        showLine: true,
                        indent: 20,
                        expandedKeys: [],
                        strict:false
                    },
                    toolbar: {
                        show: true,
                        list: ['ALL', 'REVERSE', 'CLEAR']
                    },
                    model: {
                        label: {
                            type: 'block',
                            block: {
                                //最大显示数量, 0:不限制
                                showCount: 8,
                                //是否显示删除图标
                                showIcon: true,
                            }
                        }
                    },
                    filterable: true,
                    height: 'auto',
                    data: function () {
                        return convertTreeData({ datas: result.data, defaultArr: value })
                    },
                    on: function (data) {
                        //arr:  当前多选已选中的数据
                        var arr = data.arr;
                        let menu_idsActicve = [];
                        arr.forEach(v => {
                            menu_idsActicve.push(v.key + '')
                        })
                        xmSelect.batch('#menu', 'update', {
                            data: function () {
                                return convertTreeData({ datas: result.data, defaultArr: menu_idsActicve })
                            },
                        });
                        let menu_ids = []
                        menu.getTreeValue().forEach(item=>{
                            menu_ids.push(item.key)
                        })
                        $('#menu_ids').val(menu_ids.toString())
                    },
                }
                var menu = xmSelect.render(option)
            });
        }

        // 获取树状数据
        function convertTreeData(
            {
                datas = [],
                rootValue = 0,
                valueField = 'id',
                titleField = 'name',
                parentField = 'pid',
                defaultArr = []
            }
        ) {
            let list = datas.filter((v) => {
                return v[parentField] === rootValue;
            }).map(v => {
                return {
                    key: v[valueField],
                    name: v[titleField],
                    value: v[valueField],
                    selected: false,
                    defaultArr
                }
            })
            list.forEach((v) => {
                if (defaultArr.length !== 0) {
                    defaultArr.forEach(item => {
                        if (item == v.key) {
                            v.selected = true
                        }
                    })
                    
                }
                v.children = convertTreeData({
                        datas,
                        rootValue: v.key,
                        valueField,
                        titleField,
                        parentField,
                        defaultArr: v.defaultArr
                    });

            })
            return list;
        }

    </script>
</body>

</html>